<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录注册</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            overflow: hidden;
            padding: 20px;
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .container {
            position: relative;
            width: 100%;
            max-width: 450px;
            padding: 40px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            overflow: hidden;
            z-index: 10;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: rotate(45deg);
            z-index: -1;
            animation: shine 6s infinite linear;
        }

        @keyframes shine {
            0% { transform: rotate(45deg) translateX(-100%); }
            100% { transform: rotate(45deg) translateX(100%); }
        }

        .logo {
            text-align: center;
            margin-bottom: 40px;
            transform: translateZ(50px);
        }

        .logo i {
            font-size: 60px;
            color: white;
            margin-bottom: 15px;
            text-shadow: 0 0 20px rgba(255,255,255,0.5);
            animation: floatIcon 3s ease-in-out infinite;
        }

        @keyframes floatIcon {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .logo h2 {
            color: white;
            font-size: 32px;
            font-weight: 700;
            letter-spacing: 2px;
            text-shadow: 0 0 10px rgba(255,255,255,0.3);
            background: linear-gradient(45deg, #fff, #a8e6ff, #fff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% 200%;
            animation: textShine 3s ease-in-out infinite;
        }

        @keyframes textShine {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .input-group {
            position: relative;
            margin-bottom: 30px;
            transform: translateZ(30px);
        }

        .input-group input {
            width: 100%;
            padding: 18px 20px 18px 60px;
            background: rgba(255, 255, 255, 0.08);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            outline: none;
            color: white;
            font-size: 16px;
            transition: all 0.4s ease;
            backdrop-filter: blur(10px);
        }

        .input-group input:focus {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .input-group input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .input-group i {
            position: absolute;
            left: 25px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 20px;
            transition: all 0.3s ease;
        }

        .input-group input:focus + i {
            color: #a8e6ff;
            text-shadow: 0 0 10px rgba(168, 230, 255, 0.8);
            transform: translateY(-50%) scale(1.2);
        }

        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            font-size: 14px;
            transform: translateZ(20px);
        }

        .remember-forgot label {
            color: white;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .remember-forgot label:hover {
            color: #a8e6ff;
        }

        .remember-forgot input {
            margin-right: 8px;
            accent-color: #a8e6ff;
            transform: scale(1.2);
        }

        .remember-forgot a {
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }

        .remember-forgot a:hover {
            color: #a8e6ff;
            text-shadow: 0 0 10px rgba(168, 230, 255, 0.8);
        }

        .remember-forgot a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: #a8e6ff;
            transition: width 0.3s ease;
        }

        .remember-forgot a:hover::after {
            width: 100%;
        }

        .btn {
            width: 100%;
            padding: 18px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            border-radius: 15px;
            color: white;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s ease;
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
            position: relative;
            overflow: hidden;
            transform: translateZ(40px);
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }

        .btn:hover {
            transform: translateY(-5px) translateZ(40px);
            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.6);
            background: linear-gradient(45deg, #764ba2, #667eea);
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn:active {
            transform: translateY(-2px) translateZ(40px);
        }

        .btn:disabled {
            background: rgba(255, 255, 255, 0.3);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .btn:disabled::before {
            display: none;
        }

        .switch-link {
            text-align: center;
            margin-top: 30px;
            color: white;
            transform: translateZ(20px);
        }

        .switch-link a {
            color: #a8e6ff;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            padding: 5px 10px;
            border-radius: 8px;
        }

        .switch-link a:hover {
            color: white;
            background: rgba(255, 255, 255, 0.1);
            text-shadow: 0 0 15px rgba(168, 230, 255, 0.8);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 15s infinite linear;
            box-shadow: 0 0 20px rgba(255,255,255,0.2);
        }

        @keyframes float {
            0% {
                transform: translate(0, 0) rotate(0deg) scale(1);
            }
            33% {
                transform: translate(30px, -50px) rotate(120deg) scale(1.2);
            }
            66% {
                transform: translate(-20px, 20px) rotate(240deg) scale(0.8);
            }
            100% {
                transform: translate(0, 0) rotate(360deg) scale(1);
            }
        }

        .message {
            padding: 15px;
            margin-bottom: 25px;
            border-radius: 12px;
            text-align: center;
            display: none;
            transform: translateZ(25px);
            animation: messagePop 0.5s ease;
            backdrop-filter: blur(10px);
        }

        @keyframes messagePop {
            0% { transform: translateZ(25px) scale(0.8); opacity: 0; }
            100% { transform: translateZ(25px) scale(1); opacity: 1; }
        }

        .success {
            background: rgba(46, 204, 113, 0.2);
            color: #2ecc71;
            border: 1px solid rgba(46, 204, 113, 0.5);
            box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);
        }

        .error {
            background: rgba(231, 76, 60, 0.2);
            color: #e74c3c;
            border: 1px solid rgba(231, 76, 60, 0.5);
            box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
        }

        .loading {
            background: rgba(52, 152, 219, 0.2);
            color: #3498db;
            border: 1px solid rgba(52, 152, 219, 0.5);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }

        .form-section {
            display: none;
            animation: formSlide 0.6s ease;
        }

        @keyframes formSlide {
            from { opacity: 0; transform: translateX(50px) rotateY(-10deg); }
            to { opacity: 1; transform: translateX(0) rotateY(0); }
        }

        .form-section.active {
            display: block;
        }

        .glow-effect {
            position: absolute;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(168, 230, 255, 0.3) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(20px);
            animation: glowMove 8s ease-in-out infinite;
            z-index: -1;
        }

        @keyframes glowMove {
            0%, 100% { transform: translate(0, 0) scale(1); }
            25% { transform: translate(100px, -50px) scale(1.2); }
            50% { transform: translate(-50px, 100px) scale(0.8); }
            75% { transform: translate(-100px, -50px) scale(1.1); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-8px); }
            75% { transform: translateX(8px); }
        }

        @media (max-width: 480px) {
            .container {
                padding: 30px 20px;
            }
        }
    </style>
</head>
<body>
<div class="particles" id="particles"></div>
<div class="glow-effect" style="top: 20%; left: 10%;"></div>
<div class="glow-effect" style="top: 60%; left: 80%; animation-delay: -2s;"></div>
<div class="glow-effect" style="top: 80%; left: 20%; animation-delay: -4s;"></div>

<div class="container">
    <!-- 登录表单 -->
    <div class="form-section active" id="loginSection">
        <div class="logo">
            <i class="fas fa-user-astronaut"></i>
            <h2>用户登录</h2>
        </div>

        <div id="loginMessage" class="message"></div>

        <form id="loginForm">
            <div class="input-group">
                <i class="fas fa-user"></i>
                <input type="text" id="loginUsername" placeholder="请输入用户名" required>
            </div>

            <div class="input-group">
                <i class="fas fa-lock"></i>
                <input type="password" id="loginPassword" placeholder="请输入密码" required>
            </div>

            <div class="remember-forgot">
                <label>
                    <input type="checkbox" id="remember">
                    记住我
                </label>
                <a href="#" id="forgotPassword">忘记密码?</a>
            </div>

            <button type="submit" class="btn" id="loginBtn">登录</button>
        </form>

        <div class="switch-link">
            还没有账号? <a href="#" id="showRegister">立即注册</a>
        </div>
    </div>

    <!-- 注册表单 -->
    <div class="form-section" id="registerSection">
        <div class="logo">
            <i class="fas fa-rocket"></i>
            <h2>用户注册</h2>
        </div>

        <div id="registerMessage" class="message"></div>

        <form id="registerForm">
            <div class="input-group">
                <i class="fas fa-user"></i>
                <input type="text" id="regUsername" placeholder="请输入用户名" required>
            </div>

            <div class="input-group">
                <i class="fas fa-envelope"></i>
                <input type="email" id="regEmail" placeholder="请输入邮箱地址" required>
            </div>

            <div class="input-group">
                <i class="fas fa-phone"></i>
                <input type="tel" id="regPhone" placeholder="请输入手机号码" required>
            </div>

            <div class="input-group">
                <i class="fas fa-lock"></i>
                <input type="password" id="regPassword" placeholder="请输入密码" required>
            </div>

            <button type="submit" class="btn" id="registerBtn">注册</button>
        </form>

        <div class="switch-link">
            已有账号? <a href="#" id="showLogin">立即登录</a>
        </div>
    </div>
</div>

<script>
    // 创建动态粒子
    function createParticles() {
        const particlesContainer = document.getElementById('particles');
        const particleCount = 15;

        for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';

            const size = Math.random() * 60 + 20;
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;

            particle.style.left = `${Math.random() * 100}%`;
            particle.style.top = `${Math.random() * 100}%`;
            particle.style.animationDelay = `${Math.random() * 20}s`;
            particle.style.background = `rgba(255,255,255,${Math.random() * 0.1 + 0.05})`;

            particlesContainer.appendChild(particle);
        }
    }

    // API基础URL
    const API_BASE_URL = 'http://localhost:8080';

    // 切换登录和注册表单
    document.getElementById('showRegister').addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('loginSection').classList.remove('active');
        setTimeout(() => {
            document.getElementById('registerSection').classList.add('active');
        }, 50);
    });

    document.getElementById('showLogin').addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('registerSection').classList.remove('active');
        setTimeout(() => {
            document.getElementById('loginSection').classList.add('active');
        }, 50);
    });

    // 登录表单提交
    document.getElementById('loginForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const username = document.getElementById('loginUsername').value;
        const password = document.getElementById('loginPassword').value;
        const messageEl = document.getElementById('loginMessage');
        const loginBtn = document.getElementById('loginBtn');

        if(username === '' || password === '') {
            showMessage(messageEl, '请输入用户名和密码!', 'error');
            return;
        }

        loginBtn.disabled = true;
        loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';

        try {
            const response = await fetch(`${API_BASE_URL}/v1/user/login`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: username,
                    password: password
                })
            });

            const result = await response.json();

            if (result.state === 2000) {
                showMessage(messageEl, '登录成功! 欢迎'+username, 'success');

                if (result.data && result.data.token) {
                    localStorage.setItem('token', result.data.token);
                }

                setTimeout(() => {
                    window.location.href='/carTable.html'
                }, 1500);
            } else {
                showMessage(messageEl, result.message || '登录失败!', 'error');

                document.getElementById('loginUsername').style.animation = 'shake 0.5s';
                document.getElementById('loginPassword').style.animation = 'shake 0.5s';

                setTimeout(() => {
                    document.getElementById('loginUsername').style.animation = '';
                    document.getElementById('loginPassword').style.animation = '';
                }, 500);
            }
        } catch (error) {
            console.error('登录请求失败:', error);
            showMessage(messageEl, '网络错误，请稍后重试!', 'error');
        } finally {
            loginBtn.disabled = false;
            loginBtn.innerHTML = '登录';
        }
    });

    // 注册表单提交
    document.getElementById('registerForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const username = document.getElementById('regUsername').value;
        const email = document.getElementById('regEmail').value;
        const phone = document.getElementById('regPhone').value;
        const password = document.getElementById('regPassword').value;
        const messageEl = document.getElementById('registerMessage');
        const registerBtn = document.getElementById('registerBtn');

        if (!validateInputs(username, email, phone, password, messageEl)) {
            return;
        }

        registerBtn.disabled = true;
        registerBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 注册中...';

        try {
            const response = await fetch(`${API_BASE_URL}/v1/user/reg`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: username,
                    password: password,
                    email: email,
                    phone: phone
                })
            });

            const result = await response.json();

            if (result.state === 2000) {
                showMessage(messageEl, '注册成功! 请登录您的账户。', 'success');

                document.getElementById('registerForm').reset();

                setTimeout(() => {
                    document.getElementById('registerSection').classList.remove('active');
                    document.getElementById('loginSection').classList.add('active');
                }, 3000);
            } else {
                showMessage(messageEl, result.message || '注册失败!', 'error');
            }
        } catch (error) {
            console.error('注册请求失败:', error);
            showMessage(messageEl, '网络错误，请稍后重试!', 'error');
        } finally {
            registerBtn.disabled = false;
            registerBtn.innerHTML = '注册';
        }
    });

    // 忘记密码
    document.getElementById('forgotPassword').addEventListener('click', function(e) {
        e.preventDefault();
        const email = prompt('请输入您的注册邮箱地址:');
        if (email) {
            alert('重置密码链接已发送到: ' + email);
        }
    });

    // 显示消息
    function showMessage(element, text, type) {
        element.textContent = text;
        element.className = 'message ' + type;
        element.style.display = 'block';

        setTimeout(() => {
            element.style.display = 'none';
        }, 3000);
    }

    // 验证输入
    function validateInputs(username, email, phone, password, messageEl) {
        if (username.length < 2) {
            showMessage(messageEl, '用户名至少需要2个字符!', 'error');
            return false;
        }

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            showMessage(messageEl, '请输入有效的邮箱地址!', 'error');
            return false;
        }

        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(phone)) {
            showMessage(messageEl, '请输入有效的手机号码!', 'error');
            return false;
        }

        if (password.length < 6) {
            showMessage(messageEl, '密码至少需要6个字符!', 'error');
            return false;
        }

        return true;
    }

    // 初始化粒子效果
    createParticles();

    // 添加CSS动画
    const style = document.createElement('style');
    style.textContent = `
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                25% { transform: translateX(-8px); }
                75% { transform: translateX(8px); }
            }
        `;
    document.head.appendChild(style);
</script>
</body>
</html>